<template>
    <div style="margin: 15px; background-color: var(--ba-bg-color-overlay)">
        <!-- 公众号自定义菜单 -->
        <el-row :span="24" style="padding: 20px">
            <el-alert :title="warningContent" type="warning" style="margin-bottom: 10px" />
            <el-col :span="7" class="left-side">
                <div class="el-card is-always-shadow left-side-card">
                    <div style="display: block; clear: both; padding: 15px; margin-bottom: 15px">
                        <div style="float: left">01:21</div>
                        <div style="float: right">
                            <Icon name="fa fa-signal" color="var(--el-text-color-primary)" size="13" />
                            <Icon name="fa fa-feed" color="var(--el-text-color-primary)" size="13" style="margin: 0 8px" />
                            <Icon name="fa fa-battery-4" color="var(--el-text-color-primary)" size="13" />
                        </div>
                    </div>
                    <div style="display: block; clear: both; padding-left: 10px; padding-right: 10px">
                        <div style="float: left"><Icon name="el-icon-ArrowLeft" color="var(--el-text-color-primary)" size="20" /></div>
                        <div style="float: right"><Icon name="el-icon-User" color="var(--el-text-color-primary)" size="20" /></div>
                    </div>

                    <div class="left-side-bottom">
                        <Icon class="left-side-bottom-img" name="fa fa-keyboard-o" color="#b1b3b8" />
                        <div class="left-side-bottom-menu">
                            <div class="menu-li" v-for="(item, index) in menuList" :key="index" :style="{ width: menuListWidth }">
                                <div v-if="activeClass === index">
                                    <div class="sub-menu-add" @click="addSubMenu(index)">
                                        <Icon name="el-icon-Plus" color="#b1b3b8" />
                                        <div class="menu-arrow"></div>
                                    </div>
                                    <div class="add-sub">
                                        <div
                                            class="sub-menu-add2"
                                            v-for="(sub_item, sub_index) in item.sub_button"
                                            :key="sub_index"
                                            :class="addIndex === sub_index ? 'active' : ''"
                                            @click="getSubItem(sub_item, sub_index)"
                                        >
                                            {{ sub_item.name }}
                                        </div>
                                    </div>
                                </div>
                                <div class="text" :class="activeClass === index && addIndex === -1 ? 'active' : ''" @click="getItem(item, index)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="menu-li" v-if="menuList.length < 3" :style="{ width: menuListWidth }">
                                <div class="text" @click="addMenu" style="color: #b1b3b8">
                                    <Icon name="el-icon-Plus" color="#b1b3b8" style="top: 8%" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :span="17">
                <el-card class="box-card right-side">
                    <div v-if="showRight === 1">
                        <div v-if="menuList.length === 0">
                            <el-text size="large">你未添加自定义菜单，点击左侧添加菜单为公众号创建菜单栏。</el-text>
                        </div>
                        <div v-else>
                            <el-text tag="b" size="large">{{ menuName }}</el-text>
                            <el-button style="float: right; padding: 3px 0" type="danger" :link="true" @click="delMenu">删除菜单</el-button>
                            <div style="display: flex; margin-top: 15px">
                                <label class="right-side-title">菜单名称</label>
                                <el-input v-model="menuName" @input="onInputMenuName" placeholder="仅支持中英文和数字" style="width: 70%"></el-input>
                            </div>
                            <p v-if="isOperateSubMenu === 0" style="color: #9a8d8d; margin-left: 80px">
                                仅支持中英文和数字，字数不超过4个汉字或8个字母
                            </p>
                            <p v-else style="color: #9a8d8d; margin-left: 80px">仅支持中英文和数字，字数不超过8个汉字或16个字母</p>
                            <div v-show="isShowButtonType">
                                <div class="right-side-input">
                                    <label class="right-side-title">消息类型</label>
                                    <el-radio-group v-model="buttonType" @change="clickButtonType" style="line-height: 45px">
                                        <el-radio label="view">跳转网页</el-radio>
                                        <el-radio label="miniprogram">跳转小程序</el-radio>
                                        <el-radio label="click">发送消息</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="buttonType === 'click' && Object.keys(currentMenuContent).length === 0">
                                    <div class="right-side-input">
                                        <label class="right-side-title">菜单内容</label>
                                        <div style="line-height: 34px">
                                            <el-radio-group v-model="materialType" @change="clickMaterialType" style="line-height: 45px">
                                                <el-radio label="text" border>文本</el-radio>
                                                <el-radio label="news" border>图文</el-radio>
                                                <el-radio label="image" border>图片</el-radio>
                                                <el-radio label="voice" border>音频</el-radio>
                                                <el-radio label="video" border>视频</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div class="right-select-content" v-if="materialType !== ''">
                                        <FormItem
                                            v-if="materialType === 'text'"
                                            type="remoteSelect"
                                            v-model="material"
                                            key="text"
                                            :input-attr="{
                                                pk: 'event_key',
                                                field: 'content',
                                                'remote-url': '/admin/xmwechat.offiaccount.Material/index',
                                                placeholder: '点击选择数据',
                                                params: {
                                                    type: materialType,
                                                },
                                                onChange: onChangeMaterialType,
                                            }"
                                        />
                                        <FormItem
                                            v-else-if="materialType === 'news'"
                                            type="remoteSelect"
                                            v-model="material"
                                            key="news"
                                            :input-attr="{
                                                pk: 'article_id',
                                                field: 'title',
                                                'remote-url': '/admin/xmwechat.offiaccount.Material/index',
                                                placeholder: '点击选择数据',
                                                params: {
                                                    type: materialType,
                                                },
                                                onChange: onChangeMaterialType,
                                            }"
                                        />
                                        <FormItem
                                            v-else-if="materialType === 'image' || materialType === 'voice' || materialType === 'video'"
                                            type="remoteSelect"
                                            v-model="material"
                                            :key="materialType"
                                            :input-attr="{
                                                pk: 'media_id',
                                                field: 'name',
                                                'remote-url': '/admin/xmwechat.offiaccount.Material/index',
                                                placeholder: '点击选择数据',
                                                params: {
                                                    type: materialType,
                                                },
                                                onChange: onChangeMaterialType,
                                            }"
                                        />
                                    </div>
                                </div>
                                <div v-if="buttonType === 'view' || buttonType === 'miniprogram'">
                                    <div class="right-side-input">
                                        <label class="right-side-title">页面地址</label>
                                        <el-input v-model="url" @input="onInputUrl" placeholder="请输入页面地址" style="width: 70%"></el-input>
                                    </div>
                                </div>
                                <div v-if="buttonType === 'miniprogram'">
                                    <div class="right-side-input">
                                        <label class="right-side-title">AppId</label>
                                        <el-input v-model="appid" @input="onInputAppId" placeholder="请输入小程序AppId" style="width: 70%"></el-input>
                                    </div>
                                    <div class="right-side-input">
                                        <label class="right-side-title">小程序路径</label>
                                        <el-input
                                            v-model="pagepath"
                                            @input="onInputPagePath"
                                            placeholder="请输入小程序跳转路径"
                                            style="width: 70%"
                                        ></el-input>
                                    </div>
                                </div>
                            </div>

                            <el-card shadow="always" class="card" v-if="buttonType === 'click' && Object.keys(currentMenuContent).length !== 0">
                                <el-row class="card-row">
                                    <el-col
                                        :span="2"
                                        class="card-left"
                                        v-if="currentMenuContent.hasOwnProperty('image') && currentMenuContent.image !== ''"
                                    >
                                        <img :src="currentMenuContent.image" class="image" alt="image" />
                                    </el-col>
                                    <el-col :span="10" class="card-right">
                                        <div style="font-size: 16px">
                                            <div
                                                v-if="currentMenuContent.hasOwnProperty('name') && currentMenuContent.name !== ''"
                                                class="card-right-text"
                                            >
                                                名称： {{ currentMenuContent.name }}
                                            </div>
                                            <div
                                                v-if="currentMenuContent.hasOwnProperty('title') && currentMenuContent.title !== ''"
                                                class="card-right-text"
                                            >
                                                标题： {{ currentMenuContent.title }}
                                            </div>
                                            <div
                                                v-if="currentMenuContent.hasOwnProperty('url') && currentMenuContent.url !== ''"
                                                class="card-right-text"
                                            >
                                                链接： <el-link :href="currentMenuContent.url" target="_blank">点击链接</el-link>
                                            </div>
                                            <div
                                                v-if="currentMenuContent.hasOwnProperty('content') && !currentMenuContent.hasOwnProperty('url')"
                                                class="card-right-text"
                                            >
                                                内容： {{ currentMenuContent.content }}
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-button type="primary" round size="small" @click="reSelectContent"> 重新选择 </el-button>
                            </el-card>
                        </div>

                        <el-divider />
                        <el-col :span="24">
                            <el-button type="success" :loading="loading" size="large" style="display: block; margin: 20px auto 0" @click="submit"
                                >保存并发布</el-button
                            >
                        </el-col>
                    </div>
                    <div v-else style="min-height: 200px; text-align: center; padding-top: 100px">
                        <el-text size="large">点击左侧添加菜单为公众号创建菜单栏。</el-text>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'
import FormItem from '/@/components/formItem/index.vue'
import Icon from '/@/components/icon/index.vue'
import { getMenu, saveMenu, getMenuContent } from '/@/api/backend/xmwechat/offiaccount/menu'

export default {
    components: {
        Icon,
        FormItem,
    },
    setup() {
        const warningContent = ref(
            '创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。'
        )
        const loading = ref(false)
        const showRight = ref(0)
        const buttonType = ref('')
        const materialType = ref('')
        const menuType = ref('')
        const menuName = ref('')
        const isOperateSubMenu = ref(0)
        const isShowButtonType = ref(true)
        // activeClass 主菜单index
        const activeClass = ref(0)
        // addIndex 子菜单index
        const addIndex = ref(-1)
        const url = ref('')
        const material = ref('')
        const appid = ref('')
        const pagepath = ref('')
        const menuList = ref([])
        const menuListWidth = ref('100%')
        const currentMenuContent = ref({})

        onMounted(() => {
            getMenu().then((res) => {
                if (res.code === 1) {
                    if (res.data !== null) {
                        menuList.value = res.data
                        if (!menuList.value[0].hasOwnProperty('name') && menuList.value[0].sub_button.length === 0) {
                            menuList.value = []
                        }
                        setBottomMenuWidth()
                    }
                }
            })
        })
        // 获取当前菜单内容
        const getCurrentMenuContent = (params) => {
            getMenuContent(params)
                .then((res) => {
                    if (res.code === 1) {
                        if (res.data !== null) {
                            currentMenuContent.value = res.data
                        } else {
                            currentMenuContent.value = {}
                        }
                    }
                })
                .finally(() => {})
        }
        // 监听菜单名称input值变化
        const onInputMenuName = () => {
            if (menuList.value.length > 0) {
                if (isOperateSubMenu.value === 0) {
                    checkName('menu')
                    for (let i = 0; i < menuList.value.length; i++) {
                        if (i === activeClass.value) {
                            menuList.value[i].name = menuName.value
                        }
                    }
                } else {
                    checkName('sub_menu')
                    let subMenuList = menuList.value[activeClass.value].sub_button
                    for (let i = 0; i < subMenuList.length; i++) {
                        if (addIndex.value === i) {
                            subMenuList[addIndex.value].name = menuName.value
                        }
                    }
                }
            }
        }
        // 点击按钮
        const clickButtonType = (type) => {
            buttonType.value = type
            materialType.value = ''
            reSelectContent()
            if (type === 'miniprogram' || type === 'view') {
                menuType.value = type
            } else {
                menuType.value = ''
            }
            if (isOperateSubMenu.value === 0) {
                for (let i = 0; i < menuList.value.length; i++) {
                    if (i === activeClass.value) {
                        menuList.value[i].type = menuType.value
                        if (type === 'miniprogram') {
                            url.value = menuList.value[i].hasOwnProperty('url') ? menuList.value[i].url : ''
                            appid.value = menuList.value[i].hasOwnProperty('appid') ? menuList.value[i].appid : ''
                            pagepath.value = menuList.value[i].hasOwnProperty('pagepath') ? menuList.value[i].pagepath : ''
                        } else if (type === 'view') {
                            url.value = menuList.value[i].hasOwnProperty('url') ? menuList.value[i].url : ''
                        } else if (type === 'click') {
                        }
                    }
                }
            } else {
                let subMenuList = menuList.value[activeClass.value].sub_button
                for (let i = 0; i < subMenuList.length; i++) {
                    if (addIndex.value === i) {
                        subMenuList[addIndex.value].type = menuType.value
                        if (type === 'miniprogram') {
                            url.value = subMenuList[addIndex.value].hasOwnProperty('url') ? subMenuList[addIndex.value].url : ''
                            appid.value = subMenuList[addIndex.value].hasOwnProperty('url') ? subMenuList[addIndex.value].appid : ''
                            pagepath.value = subMenuList[addIndex.value].hasOwnProperty('pagepath') ? subMenuList[addIndex.value].pagepath : ''
                        } else if (type === 'view') {
                            url.value = subMenuList[addIndex.value].hasOwnProperty('url') ? subMenuList[addIndex.value].url : ''
                        } else if (type === 'click') {
                            if (subMenuList[addIndex.value].hasOwnProperty('key') && subMenuList[addIndex.value].hasOwnProperty('key') !== '') {
                                getCurrentMenuContent({
                                    key: subMenuList[addIndex.value].hasOwnProperty('key') ? subMenuList[addIndex.value].key : '',
                                })
                            }
                            if (
                                subMenuList[addIndex.value].hasOwnProperty('media_id') &&
                                subMenuList[addIndex.value].hasOwnProperty('media_id') !== ''
                            ) {
                                getCurrentMenuContent({
                                    media_id: subMenuList[addIndex.value].hasOwnProperty('media_id') ? subMenuList[addIndex.value].media_id : '',
                                })
                            }
                            if (
                                subMenuList[addIndex.value].hasOwnProperty('article_id') &&
                                subMenuList[addIndex.value].hasOwnProperty('article_id') !== ''
                            ) {
                                getCurrentMenuContent({
                                    article_id: subMenuList[addIndex.value].hasOwnProperty('article_id')
                                        ? subMenuList[addIndex.value].article_id
                                        : '',
                                })
                            }
                        }
                    }
                }
            }
        }
        //监听页面地址
        const onInputUrl = () => {
            if (isOperateSubMenu.value === 0) {
                for (let i = 0; i < menuList.value.length; i++) {
                    if (i === activeClass.value) {
                        menuList.value[i].type = buttonType.value
                        menuList.value[i].url = url.value
                    }
                }
            } else {
                if (menuList.value[activeClass.value].hasOwnProperty('url')) {
                    delete menuList.value[activeClass.value].url
                }
                let subMenuList = menuList.value[activeClass.value].sub_button
                for (let i = 0; i < subMenuList.length; i++) {
                    if (addIndex.value === i) {
                        subMenuList[addIndex.value].type = buttonType.value
                        subMenuList[addIndex.value].url = url.value
                    }
                }
            }
        }
        // 点击素材类型
        const onChangeMaterialType = (value) => {
            if (isOperateSubMenu.value === 0) {
                for (let i = 0; i < menuList.value.length; i++) {
                    if (i === activeClass.value) {
                        menuList.value[i].type = menuType.value
                        if (materialType.value === 'text') {
                            menuList.value[i].key = value
                            if (menuList.value[i].hasOwnProperty('article_id')) {
                                delete menuList.value[i].article_id
                            }
                            if (menuList.value[i].hasOwnProperty('media_id')) {
                                delete menuList.value[i].media_id
                            }
                        } else if (materialType.value === 'news') {
                            menuList.value[i].article_id = value
                            if (menuList.value[i].hasOwnProperty('key')) {
                                delete menuList.value[i].key
                            }
                            if (menuList.value[i].hasOwnProperty('media_id')) {
                                delete menuList.value[i].media_id
                            }
                        } else if (materialType.value === 'image' || materialType.value === 'voice' || materialType.value === 'video') {
                            menuList.value[i].media_id = value
                            if (menuList.value[i].hasOwnProperty('key')) {
                                delete menuList.value[i].key
                            }
                            if (menuList.value[i].hasOwnProperty('article_id')) {
                                delete menuList.value[i].article_id
                            }
                        }
                    }
                }
            } else {
                let subMenuList = menuList.value[activeClass.value].sub_button
                for (let i = 0; i < subMenuList.length; i++) {
                    if (addIndex.value === i) {
                        subMenuList[addIndex.value].type = menuType.value
                        // 如果主菜单有key article_id media_id则删除
                        if (menuList.value[activeClass.value].hasOwnProperty('key')) {
                            delete menuList.value[activeClass.value].key
                        }
                        if (menuList.value[activeClass.value].hasOwnProperty('article_id')) {
                            delete menuList.value[activeClass.value].article_id
                        }
                        if (menuList.value[activeClass.value].hasOwnProperty('media_id')) {
                            delete menuList.value[activeClass.value].media_id
                        }
                        if (materialType.value === 'text') {
                            subMenuList[addIndex.value].key = value

                            if (subMenuList[addIndex.value].hasOwnProperty('article_id')) {
                                delete subMenuList[addIndex.value].article_id
                            }
                            if (subMenuList[addIndex.value].hasOwnProperty('media_id')) {
                                delete subMenuList[addIndex.value].media_id
                            }
                        } else if (materialType.value === 'news') {
                            subMenuList[addIndex.value].article_id = value

                            if (subMenuList[addIndex.value].hasOwnProperty('key')) {
                                delete subMenuList[addIndex.value].key
                            }
                            if (subMenuList[addIndex.value].hasOwnProperty('media_id')) {
                                delete subMenuList[addIndex.value].media_id
                            }
                        } else if (materialType.value === 'image' || materialType.value === 'voice' || materialType.value === 'video') {
                            subMenuList[addIndex.value].media_id = value

                            if (subMenuList[addIndex.value].hasOwnProperty('key')) {
                                delete subMenuList[addIndex.value].key
                            }
                            if (subMenuList[addIndex.value].hasOwnProperty('article_id')) {
                                delete subMenuList[addIndex.value].article_id
                            }
                        }
                    }
                }
            }
        }
        // 点击素材资源分类
        const clickMaterialType = (value) => {
            materialType.value = value
            material.value = ''
            if (value === 'news') {
                menuType.value = 'article_id'
            } else if (value === 'image' || value === 'voice' || value === 'video') {
                menuType.value = 'media_id'
            } else {
                menuType.value = 'click'
            }
        }
        //监听小程序AppId
        const onInputAppId = () => {
            if (isOperateSubMenu.value === 0) {
                for (let i = 0; i < menuList.value.length; i++) {
                    if (i === activeClass.value) {
                        menuList.value[i].type = menuType.value
                        menuList.value[i].appid = appid.value
                    }
                }
            } else {
                if (menuList.value[activeClass.value].hasOwnProperty('appid')) {
                    delete menuList.value[activeClass.value].appid
                }
                let subMenuList = menuList.value[activeClass.value].sub_button
                for (let i = 0; i < subMenuList.length; i++) {
                    if (addIndex.value === i) {
                        subMenuList[addIndex.value].type = menuType.value
                        subMenuList[addIndex.value].appid = appid.value
                    }
                }
            }
        }
        //监听小程序跳转路径
        const onInputPagePath = () => {
            if (isOperateSubMenu.value === 0) {
                for (let i = 0; i < menuList.value.length; i++) {
                    if (i === activeClass.value) {
                        menuList.value[i].type = menuType.value
                        menuList.value[i].pagepath = pagepath.value
                    }
                }
            } else {
                if (menuList.value[activeClass.value].hasOwnProperty('pagepath')) {
                    delete menuList.value[activeClass.value].pagepath
                }
                let subMenuList = menuList.value[activeClass.value].sub_button
                for (let i = 0; i < subMenuList.length; i++) {
                    if (addIndex.value === i) {
                        subMenuList[addIndex.value].type = menuType.value
                        subMenuList[addIndex.value].pagepath = pagepath.value
                    }
                }
            }
        }
        // 检查名称字数
        const checkName = (type) => {
            let temp = 0
            for (let k = 0; k < menuName.value.length; k++) {
                if (/[\u4e00-\u9fa5]/.test(menuName.value[k])) {
                    temp += 2
                } else {
                    temp++
                }

                if (type === 'menu') {
                    if (temp > 8) {
                        menuName.value = menuName.value.slice(0, k)
                        ElNotification({
                            type: 'error',
                            message: '仅支持中英文和数字，字数不超过4个汉字或8个字母',
                        })
                        return false
                    }
                } else if (type === 'sub_menu') {
                    if (temp > 16) {
                        menuName.value = menuName.value.slice(0, k)
                        ElNotification({
                            type: 'error',
                            message: '仅支持中英文和数字，字数不超过8个汉字或16个字母',
                        })
                        return false
                    }
                } else {
                    ElNotification({
                        type: 'error',
                        message: '检查菜单名称字数ERROR',
                    })
                    return false
                }
            }
        }
        // 添加菜单
        const addMenu = () => {
            let menu = {
                name: '菜单名称',
            }
            let newLength = menuList.value.push(menu)
            let newIndex = newLength - 1

            setBottomMenuWidth()
            getItem(menu, newIndex)
        }
        //设置底部菜单宽度
        const setBottomMenuWidth = () => {
            if (menuList.value.length <= 0) {
                menuListWidth.value = '100%'
            } else if (menuList.value.length === 1) {
                menuListWidth.value = '50%'
            } else {
                menuListWidth.value = '33.33%'
            }
        }
        // 父元素
        const getItem = (item, index) => {
            // 显示右侧菜单
            showRight.value = 1
            addIndex.value = -1
            // 把当前点击元素的index，赋值给activeClass
            activeClass.value = index
            menuName.value = item.name
            isOperateSubMenu.value = 0

            if (menuList.value[index].hasOwnProperty('sub_button') && menuList.value[index].sub_button.length > 0) {
                // 若有子菜单 主菜单只保留菜单名称
                isShowButtonType.value = false
                if (menuList.value[index].hasOwnProperty('type')) {
                    delete menuList.value[index].type
                }
                if (menuList.value[index].hasOwnProperty('url')) {
                    delete menuList.value[index].url
                }
                if (menuList.value[index].hasOwnProperty('media_id')) {
                    delete menuList.value[index].media_id
                }
                if (menuList.value[index].hasOwnProperty('article_id')) {
                    delete menuList.value[index].media_id
                }
                if (menuList.value[index].hasOwnProperty('appid')) {
                    delete menuList.value[index].media_id
                }
                if (menuList.value[index].hasOwnProperty('pagepath')) {
                    delete menuList.value[index].pagepath
                }
            } else {
                // 显示消息类型按钮
                isShowButtonType.value = true
                if (menuList.value[index].hasOwnProperty('type')) {
                    if (menuList.value[index].type === 'view' || menuList.value[index].type === 'miniprogram') {
                        buttonType.value = menuList.value[index].type
                    } else {
                        buttonType.value = 'click'
                    }
                } else {
                    buttonType.value = ''
                }
                clickButtonType(buttonType.value)
            }

            // 显示素材信息
            if (buttonType.value === 'click') {
                if (menuList.value[index].hasOwnProperty('key') && menuList.value[index].key !== '') {
                    getCurrentMenuContent({
                        key: menuList.value[index].key,
                    })
                }
                if (menuList.value[index].hasOwnProperty('media_id') && menuList.value[index].media_id !== '') {
                    getCurrentMenuContent({
                        media_id: menuList.value[index].media_id,
                    })
                }
                if (menuList.value[index].hasOwnProperty('article_id') && menuList.value[index].article_id !== '') {
                    getCurrentMenuContent({
                        article_id: menuList.value[index].article_id,
                    })
                }
            }
        }
        // 增加子菜单
        const addSubMenu = (index) => {
            if (!menuList.value[index].hasOwnProperty('sub_button')) {
                menuList.value[index].sub_button = []
            } else {
                let sub_ment_list = menuList.value[index].sub_button
                if (sub_ment_list.length === 5) {
                    ElNotification({
                        type: 'error',
                        message: '子菜单最多添加5个',
                    })
                    return false
                }
            }

            let sub_menu = {
                name: '子菜单名称',
            }
            let newLength = menuList.value[index].sub_button.push(sub_menu)
            let newIndex = newLength - 1
            getSubItem(sub_menu, newIndex)
        }
        // 子元素
        const getSubItem = (item, index) => {
            addIndex.value = index
            menuName.value = item.name
            isOperateSubMenu.value = 1
            isShowButtonType.value = true
            // 若有子菜单 主菜单无需添加消息
            let subMenuList = menuList.value[activeClass.value].sub_button
            if (subMenuList[addIndex.value].hasOwnProperty('type')) {
                if (subMenuList[addIndex.value].type === 'view' || subMenuList[addIndex.value].type === 'miniprogram') {
                    buttonType.value = subMenuList[addIndex.value].type
                } else {
                    buttonType.value = 'click'
                }
                clickButtonType(buttonType.value)
            } else {
                buttonType.value = ''
            }

            if (buttonType.value === 'click') {
                if (subMenuList[addIndex.value].hasOwnProperty('key') && subMenuList[addIndex.value].hasOwnProperty('key') !== '') {
                    getCurrentMenuContent({
                        key: subMenuList[addIndex.value].hasOwnProperty('key') ? subMenuList[addIndex.value].key : '',
                    })
                }
                if (subMenuList[addIndex.value].hasOwnProperty('media_id') && subMenuList[addIndex.value].hasOwnProperty('media_id') !== '') {
                    getCurrentMenuContent({
                        media_id: subMenuList[addIndex.value].hasOwnProperty('media_id') ? subMenuList[addIndex.value].media_id : '',
                    })
                }
                if (subMenuList[addIndex.value].hasOwnProperty('article_id') && subMenuList[addIndex.value].hasOwnProperty('article_id') !== '') {
                    getCurrentMenuContent({
                        article_id: subMenuList[addIndex.value].hasOwnProperty('article_id') ? subMenuList[addIndex.value].article_id : '',
                    })
                }
            }
        }
        // 删除菜单
        const delMenu = () => {
            ElMessageBox.confirm('删除后，菜单名菜单下设置的内容全部将被删除', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    if (isOperateSubMenu.value === 0) {
                        for (let i = 0; i < menuList.value.length; i++) {
                            if (i === activeClass.value) {
                                menuList.value.splice(i, 1)
                                activeClass.value = -1
                                ElNotification({
                                    type: 'success',
                                    message: '删除成功',
                                })
                            }
                        }
                        setBottomMenuWidth()
                    } else {
                        let subMenuList = menuList.value[activeClass.value].sub_button
                        for (let i = 0; i < subMenuList.length; i++) {
                            if (addIndex.value === i) {
                                subMenuList.splice(i, 1)
                                addIndex.value = -1
                                ElNotification({
                                    type: 'success',
                                    message: '删除成功',
                                })
                            }
                        }
                    }
                })
                .catch((e) => {
                    ElNotification({
                        type: 'info',
                        message: e,
                    })
                })
        }
        // 保存并发布
        const submit = () => {
            if (menuList.value.length === 0) {
                ElNotification({
                    type: 'warning',
                    message: '空菜单，不能保存与发布。停用菜单，请前往微信公众平台操作处理',
                })
                return false
            }
            loading.value = true
            saveMenu({
                button: menuList.value,
            }).finally(() => {
                loading.value = false
            })
        }
        const reSelectContent = () => {
            currentMenuContent.value = {}
        }

        return {
            loading,
            showRight,
            activeClass,
            buttonType,
            materialType,
            menuType,
            isShowButtonType,
            addIndex,
            menuName,
            url,
            material,
            appid,
            pagepath,
            menuList,
            menuListWidth,
            isOperateSubMenu,
            warningContent,
            currentMenuContent,
            addMenu,
            addSubMenu,
            getItem,
            getSubItem,
            clickButtonType,
            clickMaterialType,
            onChangeMaterialType,
            onInputMenuName,
            onInputUrl,
            onInputAppId,
            onInputPagePath,
            delMenu,
            submit,
            reSelectContent,
        }
    },
}
</script>

<style lang="scss" scoped>
* {
    // css页面点击文字出现蓝色底色去掉方法
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.left-side {
    min-height: 550px;
    position: relative;
}
.left-side-card {
    background-color: var(--ba-bg-color-overlay);
    position: relative;
    min-height: 550px;
    border-radius: 5px;
}
.left-side-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 51px;
    background-color: var(--ba-border-color);
    border-top: 1px solid #ddd;
}
.left-side-bottom-img {
    position: absolute;
    left: 6%;
    bottom: 13px;
    font-size: 26px !important;
}
.left-side-bottom-menu {
    position: absolute;
    width: 80%;
    height: 50px;
    right: 0;
}
.menu-li {
    float: left;
    //width: var(--menuList.value.length)33.3%;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    position: relative;
    border-left: 1px solid var(--el-border-color);
}
.active {
    border: 1px solid #67c23a !important;
    color: #67c23a !important;
}
.sub-menu-add {
    position: absolute;
    bottom: 65px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border: 1px solid #e7e7eb;
    background-color: var(--ba-border-color);
}
.menu-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #b1b3b8;
    left: 50%; /* 将三角形元素的左侧边界设置为 div 元素的中央位置 */
    transform: translateX(-50%); /* 将三角形元素向左移动它的一半宽度 */
}

.right-side {
    margin-left: 20px;
    border-radius: 5px;
    background-color: var(--ba-bg-color-overlay);
}
.right-side-title {
    line-height: 34px;
    width: 80px;
}
.right-side-input {
    display: flex;
    margin-top: 10px;
}
.right-select-content {
    margin-top: 15px;
}
.add-sub {
    position: absolute;
    bottom: 115px;
    width: 100%;
    line-height: 48px;
    background-color: var(--ba-border-color);
}

.text {
    height: 50px;
}

.sub-menu-add2 {
    width: 100%;
    line-height: 48px;
    border: 1px solid #e7e7eb;
    background-color: var(--ba-border-color);
    height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card {
    margin-top: 20px;
}
.card-row {
    margin-bottom: 10px;
}
.card-left img {
    width: 90px;
    height: 90px;
}
.card-right-text {
    margin: 0 0 8px 0;
}
</style>
